<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多列布局</title>
    <style>
        .outer {
            width: 1000px;
            margin: 0 auto;

            /*指定列数*/
            column-count: 4;
            /*边框之间距离10-20*/
            column-gap: 20px;
            /*边框之间的线*/
            column-rule: 5px dashed red;
        }

        h1 {
            /*让标题横跨,只有all和none两个属性*/
            column-span: all;
            text-align: center;
        }

        .outer2{
            /*如果是浮动的话会被挡住，和这个多列布局有区别的*/
            column-count: 5;

        }
        /*图片超出了自己的列就显示不全*/
        img{
            width: 100%;
            transition: 0.5s linear;
        }
        img:hover {
            box-shadow: 0px 0px 20px black;
            transform: scale(1.02);
        }
    </style>
</head>
<body>
<!--<div class="outer">-->
<!--    <h1>震惊，博士后也来学习计算机和人工智能！</h1>-->
<!--    <p>[你说呢！！]Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis quidem adipisci excepturi veniam, aliquid, quia est et necessitatibus at culpa dignissimos voluptates. Earum ipsa minima perferendis vel animi, ea ad assumenda magni consequuntur omnis nobis deleniti molestiae tenetur dolores fugit corrupti corporis repellendus aperiam esse soluta facere nulla tempora impedit?</p>-->
<!--    <p>[说什么啊] Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam nemo omnis hic deleniti exercitationem excepturi consectetur aspernatur nobis facere quibusdam nam, vero in expedita dolor quaerat pariatur aut iusto atque animi accusantium et enim perspiciatis quo provident? Assumenda, odio inventore! <img src="../images/喜羊羊.jpg" style="width: 100%"></p>-->
<!--    <p>【说说话】Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur repellat illo voluptates nobis assumenda corrupti optio cum? Facere quis voluptatem harum tenetur. Cupiditate esse sint quo similique, quibusdam facere aliquid quas. Illum fuga officiis accusamus blanditiis ut harum officia dolore! [end]</p>-->
<!--    <p>[start] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ab nulla unde fuga nihil suscipit hic commodi voluptates nesciunt odio quas eveniet, quasi sunt explicabo? Molestiae repudiandae nam quis rerum odio sunt ratione eaque rem cupiditate quaerat provident illum, dolor quae iure dolores esse dignissimos fugit, corrupti possimus aspernatur voluptatum ducimus cumque amet? Natus itaque sint vero deleniti adipisci culpa dolor exercitationem vitae delectus laudantium recusandae facere quo alias soluta, perspiciatis libero ut facilis minus harum assumenda blanditiis repellat. Iste. [end]</p>-->
<!--    <p>[start]  Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet pariatur nihil porro harum possimus voluptas molestiae sint esse dolorem odio repudiandae aliquid facere architecto dolor, voluptatem excepturi fuga quis ab perferendis nemo illum debitis enim? Cupiditate optio similique beatae facilis, ratione placeat consequuntur tempore incidunt illum deserunt quo assumenda odio? Numquam facere deleniti eaque assumenda amet! Reprehenderit, modi. Beatae modi quos earum laboriosam. Alias repellendus rerum magni repellat voluptas. Minima cumque expedita, incidunt aut, assumenda ipsa modi eius blanditiis minus, quo sequi possimus vel nemo et tempora iste odio maxime. [end]</p>-->
<!--    <p>[start] Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa ab, maiores quas cupiditate laboriosam nisi reprehenderit porro velit nihil, rem dolorem, earum officiis. Numquam voluptas porro ex obcaecati. Dolorum accusamus ipsum odio quam modi adipisci repellat culpa quos unde dolores incidunt ad magnam possimus nobis corporis corrupti, nihil enim, vero optio illum necessitatibus sequi? Pariatur commodi incidunt nisi velit.  [end]</p>-->
<!--    <p>[start] Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt dolorum excepturi amet sit ipsa voluptate dignissimos laboriosam saepe placeat autem, minima fugit soluta rerum corporis cum consequuntur sequi veniam ab quia. Veniam dolor non, pariatur, commodi sunt provident impedit ut facere tempora perferendis libero corrupti. Obcaecati eaque cum corrupti aliquam voluptatum in maiores saepe perspiciatis incidunt debitis iusto accusamus inventore, voluptatibus minus, dolorum ipsum temporibus omnis labore adipisci cupiditate expedita dicta vero? Esse nihil cupiditate iusto dolor reiciendis fuga, consectetur soluta est totam aspernatur illum dicta! Ab velit maxime reiciendis, inventore tempore voluptate nisi id doloribus porro ut odit nemo!  [end]</p>-->
<!--    <p>[start]  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus architecto placeat quam saepe velit eum doloribus animi inventore, eveniet iste ut adipisci? Nesciunt sit error cumque quibusdam. Inventore totam minus saepe asperiores cupiditate libero distinctio illum molestias magni repellat tenetur, non dicta, dignissimos vel quae architecto, voluptates voluptatem illo rem dolor. Iure, ex tempora voluptates sint assumenda, animi expedita qui illo commodi corrupti ullam! Omnis soluta animi incidunt doloribus illum impedit quia saepe eveniet! Officia, ipsum quia. [end]</p>-->
<!--</div>-->

<!--多列布局图片-->
<div class="outer2">
    <img src="../images/img1.jpg">
    <img src="../images/img2.jpg">
    <img src="../images/img3.jpg">
    <img src="../images/img4.jpg">
    <img src="../images/img5.jpg">
    <img src="../images/img6.jpg">
    <img src="../images/img7.jpg">
    <img src="../images/img8.jpg">
    <img src="../images/img9.jpg">
    <img src="../images/img10.jpg">
    <img src="../images/img11.jpg">
    <img src="../images/img12.jpg">
    <img src="../images/img13.jpg">
    <img src="../images/img14.jpg">
</div>
</body>
</html>